<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PerBusinessMainApi } from '#/api/per/businessMain';

import { nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';

import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { businessMainLog } from '#/api/per/businessMain';

import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';

const route = useRoute();
let objectId = route.query.objectId as any;
let operateCategoryCode = route.query.operateCategoryCode as any;
const [DetailModal, detailModalApi] = useVbenModal({
  connectedComponent: Detail,
  destroyOnClose: true,
});

// 创建 Modal
const [Drawer, drawerlApi] = useVbenDrawer({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) return;
    const modalData = drawerlApi.getData<any>();
    if (!modalData) return;
    objectId = modalData.objectId;
    operateCategoryCode = modalData.operateCategoryCode;
    await nextTick(); // 等待 Grid 挂载
    await gridApi.reload();
  },
});

/** 刷新表格 */
function handleRefresh() {
  gridApi.reload();
}

/** 查看系统业务主表 */
function handleDetail(
  row: PerBusinessMainApi.BusinessMain,
  showAudit: boolean,
) {
  detailModalApi.setData({ ...row, showAudit }).open();
}

const checkedIds = ref<number[]>([]);

function handleRowCheckboxChange({
  records,
}: {
  records: PerBusinessMainApi.BusinessMain[];
}) {
  checkedIds.value = records.map((item) => item.id!);
}

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
    id: 'BusinessMain-grid',
    columns: useGridColumns(),
    height: 'auto',
    pagerConfig: {
      enabled: true,
    },
    keepSource: true,
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
          return await businessMainLog(
            {
              pageNo: page.currentPage,
              pageSize: page.pageSize,
              ...formValues,
              objectId,
              operateCategoryCode,
            },
            false,
            false,
          );
        },
      },
    },
    rowConfig: {
      keyField: 'id',
      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<PerBusinessMainApi.BusinessMain>,
  gridEvents: {
    checkboxAll: handleRowCheckboxChange,
    checkboxChange: handleRowCheckboxChange,
  },
});
</script>

<template>
  <Drawer title="业务日志" class="w-[85%]">
    <Page auto-content-height>
      <DetailModal @success="handleRefresh" />
      <Grid table-title="">
        <template #toolbar-tools>
          <TableAction :actions="[]" />
        </template>

        <template #actions="{ row }">
          <TableAction
            :actions="[
              {
                label: '查看',
                type: 'link',
                icon: ACTION_ICON.VIEW,
                onClick: handleDetail.bind(null, row, false),
              },
            ]"
          />
        </template>
      </Grid>
    </Page>
  </Drawer>
</template>
